<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>列表页</title>
    <link rel="stylesheet" href="/css/list.css">
    <link rel="stylesheet" href="/css/header.css">
    <link rel="stylesheet" href="/css/footer.css">
  </head>
  <body>
    <header></header>
    <div id="list_container">
      <!-- 种类详情 -->
      <div id="list_kind">
        <ul>
          <li><a href="#" class="red">全部</a></li>
          <li><a href="#">眼妆</a></li>
          <li><a href="#">唇妆</a></li>
          <li><a href="#">脸妆</a></li>
          <li><a href="#">美甲</a></li>
          <li><a href="#">工具</a></li>
          <li><a href="#">卸妆清洁</a></li>
          <li><a href="#">护肤</a></li>
          <li><a href="#">面膜</a></li>
          <li><a href="#">身体/护发</a></li>
          <li><a href="#">香氛</a></li>
          <li><a href="#">线上专享</a></li>
        </ul>
      </div>
      <div id="list_show">
        <!-- <div class="show_products">
          <img src="/images/picture.jpg" alt="">
          <p class="desciption">
            伊蒂之屋玩转多功能美妆棒
          </p>
          <p class="price">￥108.00</p>
        </div> -->
      </div>
    </div>
    <footer></footer>

    <!-- 定义模板 -->
    <script type="text/html" id="list-template">
      {{ each list item index }}
    	<div class="show_products" data-id="{{item.id}}">
      	    <a href="/html/detail.html?id={{item.id}}">
      		     <img src="{{ item.img }}" class="img-responsive" alt="">
      		     <h3>{{ item.title }}</h3>
               <!-- <p class="desciption">{{ item.desc }}</p> -->
               <p class="price">{{ item.price }}</p>
    	      </a>
            <a href="javascript:void(0);" class="add_to_cart"></a>
    	</div>
    	{{/each}}
    </script>
    <script src="/libs/requirejs/require.js" data-main="/js/list"></script>
  </body>
</html>
